<template>
  <!-- 赛况播报 -->
  <div class>
    <div class="tit">赛况播报</div>
    <el-tabs v-model="actGid" type="card" @tab-click="toggleClick">
      <template v-for="(v,i) in groupArr">
        <el-tab-pane :key="i" :label="v.name" :name="v.id+''"></el-tab-pane>
      </template>
    </el-tabs>
    <el-form>
      <el-form-item label="赛况时间">
        <el-date-picker
          v-model="creatTime"
          type="datetime"
          value-format="yyyy/MM/dd HH:mm:ss"
          format="yyyy/MM/dd HH:mm:ss"
          placeholder="选择日期时间"
        ></el-date-picker>
      </el-form-item>

      <el-form-item>
        <RichTxt ref="editor" />
      </el-form-item>
    </el-form>
    <el-button class="btn" type="primary" @click="save()">保存</el-button>
    <div class="tit" v-if="allList.length>0">赛况列表</div>
    <template v-for="(v,i) in allList">
      <div class="list" :key="i">
        <p class="pTit">赛况 {{i+1}}</p>
        <div v-html="v.showInfo" class="pInfo"></div>
        <p class="pdate">时间:{{v.creatTime}}</p>
        <el-button type="primary" @click="edit(v)">修改</el-button>
        <el-button type="danger" @click="del(v.id)">删除</el-button>
      </div>
    </template>
  </div>
</template>

<script>
var eId = 0;
import RichTxt from "../../../../components/editor/editor";
export default {
  components: { RichTxt },
  data() {
    return {
      groupArr: [],
      actGid: "",
      creatTime: "",
      allList: [],
    };
  },
  methods: {
    toggleClick() {
      // console.log(this.actGid);
      this.getBro();
    },
    getGroupArr() {
      this.$axios
        .get("/sbr/match/getMatchInfos/" + sessionStorage.getItem("MandA"))
        .then((res) => {
          let rr = res.data.data;
          this.groupArr = rr.matchInfoLists;
          this.actGid = this.groupArr[0].id + "";
          this.getBro();
        });
    },
    // 保存 修改赛况
    save() {
      let oo = {
        id: eId,
        matchId: this.$Base64.decode(sessionStorage.getItem("MandA")),
        groupId: this.actGid,
        info: this.$refs.editor.content,
        creatTime: this.creatTime,
      };
      console.log(oo.info);
      if (!this.creatTime) {
        this.$message.error("请选择赛况时间");
        return false;
      }
      if (!oo.info) {
        this.$message.error("请填写赛况");
        return false;
      }
      this.$axios.post("/sbr/match/putMatchResultReport", oo).then((res) => {
        this.creatTime = "";
        this.$refs.editor.content = "";
        eId = 0;
        this.getBro();
        this.$message.success("保存成功");
      });
    },
    // 获取赛项赛况
    getBro() {
      let oo = {
        matchId: this.$Base64.decode(sessionStorage.getItem("MandA")),
        groupId: this.actGid,
      };
      this.$axios
        .get("/sbr/match/getMatchResultReport", { params: oo })
        .then((res) => {
          let rr = res.data.data;
          rr.forEach((v) => {
            v.showInfo=getSimpleText(v.info)
          });
          this.allList = rr;
        });
    },
    edit(v) {
      this.creatTime = v.creatTime;
      this.$refs.editor.content = v.info;
      eId = v.id;
    },
    del(id) {
      this.$confirm("此操作将删除该赛况信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .get("/sbr/match/delMatchResultReport?id=" + id)
            .then((res) => {
              this.$message.success("删除成功");
              eId = 0;
              this.creatTime = "";
              this.$refs.editor.content = "";
              this.getBro();
            })
            .catch((err) => {
              this.$message.error("删除失败");
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  mounted() {
    this.getGroupArr();
  },
};
function getSimpleText(html){
var re1 = new RegExp("<.+?>","g");//匹配html标签的正则表达式，"g"是搜索匹配多个符合的内容
var msg = html.replace(re1,'');//执行替换成空字符
return msg;
}
</script>
<style scoped>
.tit {
  font-size: 18px;
}
.list {
  /* width: calc(50% - 1px); */
  width: 100%;
  float: left;
  margin-top: 10px;
  /* text-align: center; */
}
.pInfo {
  width: calc(100% - 20px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 10px;
}
.pTit{
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 5px;
}
.pdate{
  margin: 5px 0;
}
/* .list:nth-child(odd) {
  border-right: 1px solid #999;
} */
</style>